import axios, { type Method } from 'axios'
import { useUserStore } from '@/stores'
import { showFailToast } from 'vant'

// 类似于 2.0 中 我们 Vue 文件中 使用的  this.$router    === useRouter  的实例等于 this.$router
// useRouter  只能在Vue 文件中使用

// 2.0 中 在JS 中怎么使用的 路由   导入的是 路由的实例 和     vuex的实例
// import { useRouter } from 'vue-router'

import router from '@/router'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL: 'https://consult-api.itheima.net',
  timeout: 5000
})

instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    // Token 在 store  下面 user里面
    const store = useUserStore()
    //  携带token
    //  这样写 可能没有意外
    // 因为这里 这个接口文档 写的 有问题
    //  请求头  Authorization   请求值 Bearer token
    // Authorization 不是固定的   看文档
    // Bearer 也不是固定的   看文档

    console.log(store.user, '=store.user==')

    config.headers.Authorization = `Bearer ${store.user?.token}`

    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    // axios 底层 里面 默认包装一层了 data
    // 这个时候  res.data 实际上 后端 返回的真实数据
    //  res 直接写 res  axios 第一个参数 就是校验 res。data  res。data后端返回的真实数据
    // return   res.data      在接收的res 直接就是后端返回的数据   axios 第一个参数 res.data  第二个参数  永远是校验 res
    // console.log(res.data, '====')

    const { code, message } = res.data

    if (code !== 10000) {
      //  这个时候虽然后端响应是成功的 但是 我们  不能让他成功 跳转
      showFailToast(message)
      return Promise.reject(message)
    }

    return res.data

    // return  res  后端返回的数据 就是 res.data   axios 的泛型 就是对 res.data 校验
    // return  res.data  后端返回的数据 就是 res   axios 的泛型 就是对 res.data 校验
  },
  (err) => {
    // TODO 5. 处理401错误
    //  这个里面 主要是 token 过期
    //  401 代表的是token 过期
    console.log(err.response.status)
    if (err.response.status === 401) {
      showFailToast('token过期 请重新登录')
      // 此时 还没有处理完 等后期写到对应的逻辑在来处理------
      //  router 是 undefined 说明我们在这里 拿不到router
      // router.currentRoute.value.fullPath  这个地址 代表的就是当前  路由
      console.log(router.currentRoute.value.fullPath, '-----router----')
      console.log(router.push, '---------')
      router.push({
        path: '/login',
        query: {
          // ？ 传参   这里 可以存储到本地也可以存储到Vuex 
          //  backURL  自定义的
          backURL: router.currentRoute.value.fullPath
        }
      })
    }

    return Promise.reject(err)
  }
)
// export default instance

type dataType<T> = { code: number; message: string; data: T }

export const request = <T>(
  url: string,
  method: Method = 'GET',
  submitData?: object
) => {
  // get
  // console.log(submitData, 'submitData', method.toUpperCase())
  const data = method.toUpperCase() === 'GET' ? 'params' : 'data'
  // axios<T1>  T1 是对res.data的校验    res.data 又是后端返回的数据
  // axios<T1, T2>  T2 是 axios 对 res 进行的 校验
  //  有了 T2 T1 对res。data 的校验就会失效
  // console.log(data, '--data---')
  return instance<any, dataType<T>>({
    // url: url,
    url,
    // method: method,
    method,
    // params  和 data 不确定
    // 对象的属性  永远是字符串 代表不了变量
    // 想要对象的属性是一个变量 我们需要 添加 []
    // [data] 写到对象的属性里面 代表的是 data 是变量
    [data]: submitData
  })
}
